var ruler = {
  /**
   * 初始化刻度尺插件
   * @el 容器 String
   * @height 刻度尺高度 Number
   * @maxScale 最大刻度 Number
   * @startValue 开始的值 Number
   * @region 区间 Array
   * @background 刻度尺背景颜色 String
   * @color 刻度线和字体的颜色 String
   * @markColor  中心刻度标记颜色 String
   * @isConstant 是否不断地获取值 Boolean
   * @success(res) 滑动结束后的回调 Function
   * */
  initPlugin: function (params) {
      var initParams = {
          el: params.el,
          height: params.height || 60,
          maxScale: params.maxScale || 200,
          startValue: params.startValue || 0,
          region: params.region || false,
          background: params.background || false,
          color: params.color || false,
          markColor: params.markColor || "#FFCC33",
          isConstant: params.isConstant || false
      };

      if (!initParams.el) {
          console.warn("没有容器元素的参数");
          return false;
      }

      var rulerWrap = document.getElementById(initParams.el); //获取容器
      rulerWrap.style.height = initParams.height < 50 ? 50 + "px" : initParams.height + "px";

      //最大刻度的小值是50
      initParams.maxScale = initParams.maxScale < 50 ? 50 : initParams.maxScale;

      if (initParams.startValue > initParams.maxScale) {
          initParams.startValue = initParams.maxScale;
      }

      var minSildeNum = 0;//最小滑动的值
      var maxSildeNum = initParams.maxScale;//最大滑动的值

      if (initParams.region) {
          minSildeNum = Math.floor(initParams.region[0]);
          maxSildeNum = Math.floor(initParams.region[1]);
      }

      var count = initParams.startValue; //初始值

      var winWidth = rulerWrap.offsetWidth; //容器宽度
      var division = winWidth / 50; //每个刻度的距离 分割线
      //刻度值数组
      var scaleValueList = [];
      for (var i = 0; i <= initParams.maxScale; i += 10) {
          scaleValueList.push(i);
      }

      var canvas = rulerWrap.getElementsByTagName("canvas")[0]; //获取容器下的canvas标签
      //没有canvas就创建一个
      if (!canvas) {
          canvas = document.createElement("canvas"); //创建canvas标签
          canvas.width = winWidth;
          canvas.height = initParams.height;
          rulerWrap.appendChild(canvas);
      }
      var cxt = canvas.getContext("2d");

      if (window.devicePixelRatio) {
          canvas.width = window.devicePixelRatio * winWidth;
          canvas.height = window.devicePixelRatio * initParams.height;
          cxt.scale(window.devicePixelRatio, window.devicePixelRatio);
      }

      //画刻度尺
      function drawRuler(count) {
          count = count - 25;

          //清空画布
          cxt.clearRect(0, 0, winWidth, initParams.height);

          //刻度尺背景
          if (initParams.background) {
              cxt.fillStyle = initParams.background;
              cxt.fillRect(0, 0, canvas.width, initParams.height);
          }

          //画刻度线
          for (var i = 0; i < initParams.maxScale; i++) {
              cxt.beginPath();
              cxt.save();
              cxt.strokeStyle = initParams.color ? initParams.color : "#bbb";
              cxt.lineWidth = 1;
              cxt.lineCap = "round";
              cxt.moveTo(division * i - count * division, 0);
              cxt.lineTo(division * i - count * division, Math.floor(initParams.height * 0.3));

              if (i % 2 === 0) {
                  cxt.strokeStyle = initParams.color ? initParams.color : "#999";
                  cxt.lineTo(division * i - count * division, Math.floor(initParams.height * 0.35));
              }
              if (i % 10 === 0) {
                  cxt.strokeStyle = initParams.color ? initParams.color : "#666";
                  cxt.lineTo(division * i - count * division, Math.floor(initParams.height * 0.52));
              }

              cxt.stroke();
              cxt.restore();
              cxt.closePath();
          }

          //添加体重数字
          cxt.beginPath();
          cxt.font = "14px Arial";
          cxt.fillStyle = initParams.color ? initParams.color : "#333";
          cxt.textAlign = "center";
          cxt.textBaseline = "middle";
          scaleValueList.forEach(function (num, i) {
              cxt.fillText(num.toString(), (division * i * 10) - (count * division), Math.floor(initParams.height * 0.78));
          });
          cxt.closePath();

          //中心刻度线
          cxt.beginPath();
          cxt.save();
          cxt.strokeStyle = initParams.markColor;
          cxt.lineWidth = 2;
          cxt.lineCap = "round";
          cxt.moveTo((winWidth / 2), 0);
          cxt.lineTo((winWidth / 2), Math.floor(initParams.height * 0.52));
          cxt.stroke();
          cxt.restore();
          cxt.closePath();

      }

      if (window.devicePixelRatio) {
          canvas.style.transform = "scale(" + 1 / window.devicePixelRatio + ")";
          canvas.style.transformOrigin = "left top";
      }

      drawRuler(count);

      //滑动相关
      var initX = 0, //初始x 距离
          endX = 0, //结束x 距离
          distanceX = 0, //移动距离
          _distanceX = 0,// 判断用的移动距离
          lastX = count; //上次移动距离

      if (!canvas) return false;

      //手指按下
      canvas.addEventListener("touchstart", function (e) {
          initX = e.targetTouches[0].pageX;

      }, false);

      //手指滑动
      canvas.addEventListener("touchmove", function (e) {
          endX = e.targetTouches[0].pageX;
          moveEvent();
      }, false);

      //手指抬起
      canvas.addEventListener("touchend", function (e) {
          lastX = count;
          overEvent();
      }, false);

      var isMouseDown = false; //鼠标是否按下

      //鼠标按下
      canvas.addEventListener("mousedown", function (e) {
          isMouseDown = true;
          initX = e.layerX;
      }, false);

      //鼠标移动
      canvas.addEventListener("mousemove", function (e) {
          if (!isMouseDown) {
              return false;
          }
          endX = e.layerX;
          moveEvent();
      }, false);


      //鼠标抬起&离开
      canvas.addEventListener("mouseup", function (e) {
          lastX = count;
          isMouseDown = false;
          overEvent();
      }, false);

      canvas.addEventListener("mouseleave", function (e) {
          if (isMouseDown) {
              lastX = count;
              isMouseDown = false;
              overEvent();
          }
      }, false);


      //手指&鼠标移动事件
      function moveEvent() {
          distanceX = Math.floor((endX - initX) / (winWidth / 50));
          if (distanceX === _distanceX) {
              return false;
          }
          _distanceX = distanceX;
          count = lastX + distanceX;

          if (count >= initParams.maxScale || count <= 0) {
              count = count >= initParams.maxScale ? initParams.maxScale : 0;
          }
          drawRuler(count);

          if (initParams.isConstant) {
              params.success && params.success(count);
          }
      }

      //手指&鼠标结束事件
      function overEvent() {
          if (count > maxSildeNum) {
              lastX = count = count > maxSildeNum ? maxSildeNum : count;
          } else if (count < minSildeNum) {
              lastX = count = count < minSildeNum ? minSildeNum : count;
          } else {

          }
          drawRuler(count);

          //返回最后的值
          params.success && params.success(count);
      }

  }
};

